<template>
  <div class="sales-table">
    <div class="legend-area">
      <SalesLegend />
    </div>
    <div class="split-line"></div>
    <div class="table">
      <div class="head tr">
        <div class="td inline" :style="getColWidth()">楼栋</div>
        <div class="td inline" :style="getColWidth()">层数</div>
        <div class="td inline" v-for="n in houses" :key="n" :style="getColWidth()">室号</div>
      </div>
      <div class="content">
        <div :class="['tr', {active:currentFloor===floor.floor && currentHouse===-1}]" v-for="(floor, index) in list" :key="index">
          <div class="split-line-dash"></div>
          <div class="td inline" :style="getColWidth()">{{buildingOverview.buildingId}}</div>
          <div class="td inline" :style="getColWidth()">{{floor.floor}}</div>
          <div class="td inline" :class="{active: currentHouse==(floor.rooms[m-1] && floor.rooms[m-1].roomNumber)}" v-for="m in houses" :key="m" :style="`background:${floor.rooms[m-1] && floor.rooms[m-1].color || 'transparent'};${getColWidth()}`" @click="selectHouse(floor.rooms[m-1], floor.floor)">{{(floor.rooms[m-1] && floor.rooms[m-1].roomNumber) || '-'}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SalesLegend from './Legend.vue'
import legendInfo from '../libs/legend_info'
import {mapState} from 'vuex'
export default {
  components: {
    SalesLegend
  },
  methods: {
    getColWidth() {
      return `width: calc(${(1/(this.houses+2))*100}% - 10px);margin: 1px;`
    },
    getData() {
      let houses = 0
      let list = []
      this.buildingInfo.forEach(item => {
        let floor = item['层数']
        if (!item['不动产单元编号']) {
          return
        }
        let roomInfo = {
          roomId: item['不动产单元编号'],
          unitNumber: item['单元号'],
          roomNumber: item['房间号'],
          color: (this.showBuildingsRight ? legendInfo[this.showBuildingsRight][item[this.showBuildingsRight]] : null) || null
        }
        let option = list.find(d => d.floor == floor)
        if (option) {
          option.rooms.push(roomInfo)
        } else {
          option = {
            floor,
            rooms: [roomInfo]
          }
          list.push(option)
        }
        if (option.rooms.length > houses) {
          houses = option.rooms.length
        }
      })
      this.houses = houses
      this.list = list
    },
    selectHouse(room, floor) {
      if (!room) {
        return
      }
      let houseInfo = this.buildingInfo.find(item => (item['层数'] == floor && item['房间号'] == room.roomNumber))
      if (!houseInfo || !houseInfo['模型名称']) {
        return
      }
      this.$store.commit('patch_house_info', JSON.parse(JSON.stringify(houseInfo)))
      this.currentHouse = houseInfo['房间号'] || -1
    }
  },
  mounted() {
    this.getData()
  },
  data() {
    return {
      houses: 2, // 一层最多有几室
      list: [],
      currentFloor: -1,
      currentHouse: -1,
      legendInfo
    }
  },
  computed: {
    ...mapState({
      showBuildingsRight: state => state.showBuildingsRight,
      buildingOverview: state => state.buildingOverview,
      buildingInfo: state => state.buildingInfo
    })
  },
  watch: {
    buildingInfo() {
      this.getData()
    },
    showBuildingsRight() {
      this.getData()
    }
  }
}
</script>

<style lang="less" scoped>
.split-line, .split-line-dash{
  width: 400px;
  height: 1px;
  margin: 5px auto;
  background-image: url(~@/assets/images/split-line.png);
}
.split-line-dash{
  margin: 0 auto;
  width: 300px;
  background-image: url(~@/assets/images/split-line-dash.png);
}
.sales-table{
  position: absolute;
  top: 0;
  right: 25px;
  width: 350px;
  height: 480px;
  background-image: url(~@/assets/images/bg2.png);
  background-size: 100% 100%;
  padding: 10px;
  overflow: hidden;
  pointer-events: initial;
  .legend-area{
    height: 65px;
    width: 300px;
    margin: 0 auto;
  }
  .table{
    width: 100%;
    line-height: 30px;
    .head{
      color: #4BF5F1;
      font-size: 18px;
      font-weight: bold;
    }
    .content{
      font-size: 14px;
      max-height: 330px;
      overflow: auto;
    }
    .td{
      cursor: pointer;
    }
    .td.active{
      outline: 1px solid #4BF5F1;
    }
  }
}
</style>
